<template>
	<div class="infoContainer">
		<div class="nav">
			<div class="nav-left">
				<span>APT溯源取证平台</span>
			</div>
			<div class="nav-middle">
				<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" background-color="#545c64"
					text-color="#fff" active-text-color="#ffd04b" router>
					<el-menu-item index="/clueSearch">威胁情报</el-menu-item>
					<el-menu-item index="/fileSearch">
						<span @click="goUrl">文件分析</span>
					</el-menu-item>
					<el-menu-item index="/TrafficService">流量分析</el-menu-item>
				</el-menu>
			</div>
			<div class="nav-right">
				<div>
					<i class="sysCenter"></i>
					<span class="hander">系统中心</span>
				</div>
				<div>
					<i class="user"></i>
					<span class="hander">用户名</span>
				</div>
			</div>
		</div>
		<div class="centerBody">
			<router-view />
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				activeIndex: '',
			}
		},
		mounted() {
			this.activeIndex = this.$route.path
		},
		watch:{
			$route(to) {
			  this.activeIndex = to.path
			}
		},
		methods:{
			goUrl(){
				window.open('http://112.74.40.189:8082/', '_blank');
			}
			
		}
	}
</script>

<style scoped>
	.infoContainer {
		overflow-y: auto;
		width: 100%;
		height: 100%;
	}

	.nav {
		width: 100%;
		height: 60px;
		display: flex;
		background-color: #233e60;
	}

	.nav-left {
		width: 30%;
		height: 100%;
	}

	.nav-left>span {
		font-size: 20px;
		color: #ffffff;
		margin-left: 20px;
		line-height: 60px;
	}

	.nav-middle {
		width: 40%;
		height: 100%;
	}

	.nav-right {
		width: 30%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.nav-right>div {
		margin-right: 20px;
		display: flex;
		align-items: center;
	}

	.nav-right span {
		font-size: 14px;
		color: white;
	}

	.nav-right i {
		display: inline-block;
		height: 20px;
		width: 20px;
		margin-right: 12px;
	}

	.sysCenter {
		background-image: url('../assets/sysCenter.png');
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.user {
		background-image: url('../assets/user.png');
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.hander:hover {
		cursor: pointer;
	}

	.centerBody {
		width: 100%;
		height: 940px;
		background-color: #f2f4f6;
		position: absolute;
	}
</style>

<style>
	.infoContainer .el-menu.el-menu--horizontal {
		height: 100%;
	}

	.infoContainer .el-menu--horizontal>.el-menu-item {
		float: left;
		height: 100%;
		line-height: 60px;
		margin: 0;
		border-bottom: 2px solid transparent;
		color: #909399;
		font-size: 16px;
		width: 33.333%;
		text-align: center;
		background-color: #233e60 !important;
	}

	.infoContainer .el-menu--horizontal>.el-menu-item.is-active {
		background-color: #071f3d !important;
	}
</style>
